<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>华富</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<style>
    html,body {
      font-size: 1.2rem;
      background: #ffffff;
      color: #333333 !important
    }
    [v-cloak] {
        display: none;
    }
    #header {
        display: flex;
        background: #fff;
        position: fixed;
        top: 0;
        width: 100vw;
        z-index: 2;
    }

    #header .search_box {
        flex: 1;
    }
    /*搜索*/

    #header .search_box {
        font-size: 0;
        text-align: center;
        height:4.4rem;
    }

    #header .search_box li {
        display: inline-block;
        height: 4.4rem;
        line-height: 4.4rem;
        font-size: 1.5rem;
        margin: 0 1.6rem;
        padding: 0;
        position: relative;
        color: #000000;
    }

    #header .search_box .active {
        color: #ed6a20;
    }

    #header .search_box .active:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.2rem;
        border-radius: 0.1rem;
        background-color: #ed6a20;
    }
    /*消息*/

    #header .msg_box {
        display: flex;
        align-items: center;
        padding: 0rem 0.75rem;
    }

    #header .msg_box img {
        display: inline-block;
        vertical-align: middle;
        width: 0.95rem;
        height: 1.657rem;
    }

</style>
<body>

<header id="header" style="padding-top:25px;">
    <div class="msg_box" onclick="closeYM()">
        <img src="../../image/back.png" alt="">
    </div>

    <ul class="search_box clearfix">
        <li class="active" onclick="openF(0)">商品</li>
        <li onclick="openF(1)">详情</li>
        <li onclick="openF(2)">评价</li>
    </ul>

    <div class="msg_box">
        <img style="height:1.75rem;width:1.7rem;" src="../../image/class/class_classify_nav4.png" alt="">
    </div>
    <div class="msg_box">
        <img style="height:1.95rem;width:1.7rem;" src="../../image/class/class_classify_nav5.png" alt="">
    </div>
</header>


</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<!-- <script type="text/javascript" src="../../script/aui-popup.js" ></script> -->


<script type="text/javascript">
  function doSearch(){
      var searchValue = document.getElementById("search-input").value;
      if(searchValue){
          api.toast({
              msg: searchValue,
              duration: 2000,
              location: 'bottom'
          });
      }
  }
  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {

          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }
  apiready = function() {
      var headerH = $api.offset($api.byId('header')).h;
      console.log(api.pageParam.goodsId);

      api.openFrame({
          name: 'mall_commodity',
          url: './mall_commodity.html',
          rect: {
              x: 0,
              y: headerH,
              w: 'auto',
              h: api.frameHeight - headerH
          },
          pageParam: {
              goodsId: api.pageParam.goodsId
          },
          bounces: false,
          bgColor: 'rgba(0,0,0,0)',
          vScrollBarEnabled: true,
          hScrollBarEnabled: true
      });
  };

  function closeYM() {
      api.closeWin({});
  }

  var arrName = [{
      name: 'mall_commodity',
      frame: true,
      isBounes: false,
      url: './mall_commodity.html'
  }, {
      name: 'mall_details',
      frame: true,
      isBounes: false,
      url: './mall_details.html'
  }, {
      name: 'mall_comment',
      frame: true,
      isBounes: false,
      url: './mall_comment.html'
  }]

  function openF(num) {
      var headerH = $api.offset($api.byId('header')).h;
      $('.search_box li').removeClass('active')
      $('.search_box li').eq(num).addClass('active')
      if (arrName[num].frame) {
          api.openFrame({
              name: arrName[num].name,
              url: arrName[num].url,
              rect: {
                  x: 0,
                  y: headerH,
                  w: 'auto',
                  h: api.frameHeight - headerH
              },
              pageParam: {
                  goodsId: api.pageParam.goodsId
              },
              bounces: arrName[num].isBounes
          });
          arrName[num].frame = !arrName[num].frame
      } else {
          api.bringFrameToFront({
              from: arrName[num].name
          });
      }
  }

  // var popup = new auiPopup();
  // function showPopup(){
  //     popup.show(document.getElementById("top-right"))
  // }

  function openTishi(){
    var headerH = $api.offset($api.byId('header')).h;
    api.openFrame({
        name: 'classDetailPop',
        url: './class_detail_pop.html',
        rect: {
            x: 0,
            y: headerH,
            w: 'auto',
            h: 'auto'
        },
        pageParam: {

        },
        bounces: false,
        bgColor: 'rgba(0,0,0,0)',
        vScrollBarEnabled: true,
        hScrollBarEnabled: true
    });
  }
</script>
